<template>
  <div class="datatab">
       <div class="actorhead">
                <el-button  type="text" @click="dialogVisible = true"  class="addactor"  v-show="$props.data==='医生'">添加医生</el-button>
                <div class="search">
                    <input type="text" @input="searchInput" v-model="searchtext" placeholder="输入要搜的姓名/手机号">
                    <button @click="searchBtnClick">搜索</button>
                </div>
            </div>
        <div class="actor">
            <el-table
                :data="data==='医生'?actorlist:sicklist"
                style="width: 100%" >
                <el-table-column
                    type="index"
                    label="序号"
                    :width="data==='医生'?'80':'150'">
                </el-table-column>
                <el-table-column
                    value="text"
                    prop="id"
                    label="ID"
                    :width="data==='医生'?'120':'150'">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="姓名"
                    :width="data==='医生'?'130':'160'">
                </el-table-column>
                <el-table-column
                    v-if="data==='医生'"
                    prop="hospital"
                    label="隶属医院"
                    width="180">
                </el-table-column>
                <el-table-column
                    v-if="data==='医生'"
                    prop="grade"
                    label="医师等级"
                    :width="data==='医生'?'160':'190'">
                </el-table-column>
                <el-table-column
                    prop="phone"
                    label="手机号"
                    :width="data==='医生'?'200':'260'">
                </el-table-column>
                <el-table-column
                    prop="pass"
                    label="密码"
                    :width="data==='医生'?'130':'180'">
                </el-table-column>
                <el-table-column
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="changeActor(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="deleteActor(scope.row)" type="text" size="small">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <!-- 编辑医生和患者弹框 -->
            <div class="changeactordialog">
                <el-dialog
                        title="编辑"
                        :visible.sync="changedialogVisible"
                        width="30%"
                        :before-close="handleClose">
                            <p><span>姓名</span><span>:</span><input type="text" v-model="changeactorlist.name"></p>
                            <p v-if="data==='医生'"><span>隶属医院</span><span>:</span><input type="text" v-model="changeactorlist.hospital"></p>
                            <p v-if="data==='医生'"><span>医师等级</span><span>:</span><input type="text" v-model="changeactorlist.grade"></p>
                            <p><span>手机号 </span><span>:</span><input type="text" v-model="changeactorlist.phone"></p>
                            <p><span>密码</span><span>:</span><input type="text" v-model="changeactorlist.pass"></p>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="changeActorClose">取 消</el-button>
                            <el-button type="primary" @click="changeActorSubmit">确 定</el-button>
                        </span>
                </el-dialog>
            </div>
        </div>
            <!-- 添加医生弹框 -->
        <el-dialog
            title="添加医生"
            :visible.sync="dialogVisible"
            width="30%"
            height="10%"
            :before-close="handleClose">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="id :" prop="id">
                    <el-input class="addactorid" type="text" v-model="ruleForm.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="医生姓名 :" prop="name">
                    <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="隶属医院 :" prop="hospital">
                    <el-input type="text" v-model="ruleForm.hospital" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="医师等级 :" prop="grade">
                    <el-input type="text" v-model="ruleForm.grade" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号 :" prop="grade">
                    <el-input type="text" v-model="ruleForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码 :" prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <p class="uploadphoto">
                    <span>上传身份证</span>
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        multiple
                        :limit="3">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </p>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <div class="block">
            <el-pagination
                layout="prev, pager, next"
                :total="50">
            </el-pagination>
        </div>
  </div>
</template>

<script>
import axios from '../../../utils/request'
export default {
    name:"DataTab",
    props: {
        data:{
            type: String,
            default: '医生'
        }
    },
    methods:{
        //模糊搜索
        searchBtnClick(){
            if(this.data==='医生'){
                const arr=this.actorlist.filter((item,index)=>{
                    return item.name.includes(this.searchtext)||item.phone.toString().includes(this.searchtext)
                })
                this.actorlist=arr
            }else{
                const arr=this.sicklist.filter((item,index)=>{
                    return item.name.includes(this.searchtext)
                })
                this.sicklist=arr
            }
        },
        //绑定输入框内容
        searchInput(e){
            this.searchtext=e.target.value
        },
        //关闭弹框
        handleClose(done) {
                done();
        },
        //添加医生弹框提交按钮
        submitForm(formName) {
            console.log(this.ruleForm)
            this.actorlist.push(this.ruleForm)
            this.$refs[formName].validate((valid) => {
            if (valid) {
                // alert('submit!');
                this.dialogVisible=false
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        //编辑按钮医生列表信息
        changeActor(row) {
            this.changedialogVisible = true
            this.changeactorlist.id=row.id
            this.changeactorlist.name=row.name
            this.changeactorlist.hospital=row.hospital
            this.changeactorlist.grade=row.grade
            this.changeactorlist.phone=row.phone
            this.changeactorlist.pass=row.pass
        },
        //提交编辑医生信息
        changeActorSubmit(){
            this.changedialogVisible = false
            var params={
                id:this.changeactorlist.id,
                name:this.changeactorlist.name,
                hospital:this.changeactorlist.hospital,
                grade:this.changeactorlist.grade,
                phone:this.changeactorlist.phone,
                pass:this.changeactorlist.pass
            }
            if(this.data=='医生'){
                this.actorlist=this.actorlist.map(item=>{
                    return item.id==params.id?params:item
                })
            }else if(this.data=='患者'){
                this.sicklist=this.sicklist.map(item=>{
                    return item.id==params.id?params:item
                })
            }
        },
        //取消编辑医生列表
        changeActorClose(){
            this.changedialogVisible = false
        },
        //删除医生
        deleteActor(row) {
            if(this.data=='医生'){
                const arr=this.actorlist.filter((item,index)=>{
                    return item.id!==row.id
                })
                this.actorlist=arr
            }else if(this.data=='患者'){
                const arr=this.sicklist.filter((item,index)=>{
                return item.id!==row.id
            })
            this.sicklist=arr
            }
        },
        //删除患者
        deleteSick(row){
            console.log(row)
            const arr=this.sicklist.filter((item,index)=>{
                return item.id!==row.id
            })
            this.sicklist=arr
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
    },
    //请求数据
    mounted(){
        axios.get("/api/getdata").then(res=>{
            this.actorlist=res.data.actorlist
            this.sicklist=res.data.sicklist
        })
    },
    data(){
        //校验密码
        var validatePass = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入密码'));
            } else {
            if (this.ruleForm.checkPass !== '') {
                this.$refs.ruleForm.validateField('checkPass');
            }
            callback();
            }
        };
        //校验姓名
        var name = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入姓名'));
            } else {
            callback();
            }
        };
        //校验医院
        var hospital = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入隶属医院'));
            } else {
            callback();
            }
        };
        //校验序号
        var id = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入序号'));
            } else {
            callback();
            }
        };
        //校验医师等级
        var grade = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入医师等级'));
            } else {
            callback();
            }
        };
        //校验医师等级
        var phone = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入医师等级'));
            } else {
            callback();
            }
        };
        return{
            actorlist:[],
            sicklist:[],
            searchtext:'',
            dialogVisible: false,
            changedialogVisible: false,
            fileList: [{name: 'food.jpeg', url: ''}],
            changeactorlist:{
                name:'',
                hospital:'',
                grade:'',
                phone:'',
                pass:''
            },
            ruleForm: {
                pass: '',
                name: '',
                hospital:'',
                grade:'',
                id:''
            },
                rules: {
                name: [
                    { validator: name, trigger: 'blur' }
                ],
                hospital: [
                    { validator: hospital, trigger: 'blur' }
                ],
                grade: [
                    { validator: grade, trigger: 'blur' }
                ],
                phone: [
                    { validator: phone, trigger: 'blur' }
                ],
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                id: [
                    { validator: id, trigger: 'blur' }
                ]
            }
        }
    },
}
</script>

<style lang="scss" scoped>
    .actorhead{
        display: flex;
        justify-content: space-between;
        position: relative;
        height: 30px;
        .search{
            position: absolute;
            right:150px;
        }
    }
        .editbtn,.deletebtn{
            background-color: #fff;
            color: rgb(4, 184, 255);
            border: 0;
            margin: 0 4px;
            font-size: 13px;
            padding: 3px 5px;
            margin: 3px 0;
        }
        .addactor{
            background-color: #fff;
            color: rgb(4, 184, 255);
            margin: 0 4px;
            border: 1px solid  rgb(4, 184, 255);
            font-size: 13px;
            padding: 3px 5px;
            margin: 3px 0;
        }
        .el-form-item{
            line-height: 30px;
            padding: 0 40px;
        }
        .actor{
            p{
                width: 90%;
                display: flex;
                margin: 5px 0;
                span:first-child{
                    display: inline-block;
                    width: 65px;
                    margin-left: 20px;
                    margin-right: 0;
                }
                span{
                    margin-right: 25px;
                }
                input{
                    width: 200px;
                    line-height: 23px;
                }
            }
        }
        .el-form-item{
            margin: 3px 0;
            line-height: 25px;
        }
        .uploadphoto{
            display: flex;
        }
</style>